<template>
    <div style="margin-bottom: 100px;">
        <router-view />
        <van-tabbar route :placeholder="true" v-model="activate">
            <van-tabbar-item place name="project" icon="wap-home-o" to="/m/home">项目列表</van-tabbar-item>
            <!-- <van-tabbar-item place name="sensor" icon="tv-o" to="/m/sensor">传感器</van-tabbar-item> -->
            <van-tabbar-item place name="chart" icon="chart-trending-o" to="/m/chart">图表</van-tabbar-item>
            <van-tabbar-item place name="settings" icon="setting-o" to="/m/settings">设置</van-tabbar-item>
        </van-tabbar>            
    </div>
</template>


<script>
import { ref, defineComponent, toRefs } from 'vue';
export default defineComponent({
    name: "ToolBar",
    setup(){
        const activate = ref(0);
        return {
            activate
        }
    }
})
</script>

<style scoped>

:deep(.van-tabbar--fixed){
    left: auto !important;
}

@media (min-width: 1080px) {
    /* 此处定义的  1080px 与 main.css中 mobile-container max-width: 1080px 相对应 */
    :deep(.van-tabbar){
        width: auto !important;
        min-width: 1080px;
    }    
}
</style>